export function useCompPosition(curComp: TComp) {
  return [
    {
      id: 'Top',
      icon: 'Top',
      handler() {
        const PW = getPanelWH().width
        const CW = getCurCompWH(curComp.id).width
        curComp.grid.left = (PW / 2) - (CW / 2)
        curComp.grid.top = 0
      }
    },
    {
      id: 'Right',
      icon: 'Right',
      handler() {
        const { width: PW, height: PH } = getPanelWH()
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.grid.left = PW - CW
        curComp.grid.top = (PH / 2) - (CH / 2)
      }
    },
    {
      id: 'Bottom',
      icon: 'Bottom',
      handler() {
        const { width: PW, height: PH } = getPanelWH()
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.grid.top = PH - CH
        curComp.grid.left = (PW / 2) - (CW / 2)
      }
    },
    {
      id: 'Back',
      icon: 'Back',
      handler() {
        const PH = getPanelWH().height
        const CH = getCurCompWH(curComp.id).height
        curComp.grid.left = 0
        curComp.grid.top = (PH / 2) - (CH / 2)
      }
    },
    {
      id: 'TopLeft',
      icon: 'TopLeft',
      handler() {
        curComp.grid.left = 0
        curComp.grid.top = 0
      }
    },
    {
      id: 'TopRight',
      icon: 'TopRight',
      handler() {
        const PW = getPanelWH().width
        const CW = getCurCompWH(curComp.id).width
        curComp.grid.left = PW - CW
        curComp.grid.top = 0
      }
    },
    {
      id: 'BottomLeft',
      icon: 'BottomLeft',
      handler() {
        const PH = getPanelWH().height
        const CH = getCurCompWH(curComp.id).height
        curComp.grid.top = PH - CH
        curComp.grid.left = 0
      }
    },
    {
      id: 'BottomRight',
      icon: 'BottomRight',
      handler() {
        const { width: PW, height: PH } = getPanelWH()
        const { width: CW, height: CH } = getCurCompWH(curComp.id)
        curComp.grid.left = PW - CW
        curComp.grid.top = PH - CH
      }
    }
  ] as TPositionMenu[]
}

function getCurCompWH(id: string) {
  const curCompDom = document.getElementById(`workspace-panel-edit-comp-contextmenu${id}`)
  const { width, height } = curCompDom?.getBoundingClientRect() as DOMRect
  return { width: Math.floor(width), height: Math.floor(height) }
}

function getPanelWH() {
  const workspaceEdit = document.getElementById('workspace-panel-edit')
  const { width, height } = workspaceEdit?.getBoundingClientRect() as DOMRect
  return { width: Math.floor(width), height: Math.floor(height) }
}